<template>
    <div class="app-container">
        <el-card class="box-card components-container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="课程名称">
                    {{ form.name }}
                </el-form-item>
                <el-form-item label="所属专业">
                    {{ form.specialityName }}
                </el-form-item>
                <el-form-item label="课程图片">
                    <el-image style="width: 100px; height: 100px" :src="form.resultImage"
                        :preview-src-list="form.srcList"></el-image>
                </el-form-item>
                <el-form-item label="课程简介">
                    <editor v-model="form.remark" :min-height="10" disabled />
                    <!-- <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="form.remark"
                        readonly></el-input> -->
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <template slot-scope="scope">
                        <el-switch v-model="form.validFlag" :active-value="1" :inactive-value="0" disabled></el-switch>
                    </template>
                </el-form-item>

                <el-form-item label="已有单元">
                </el-form-item>
                <el-card class="box-card components-container">
                    <el-table v-loading="loading" :data="form.tunitInfoVos">
                        <!-- <el-table-column type="selection" width="55" align="center" /> -->
                        <el-table-column label="主键" width="55" align="center" prop="id" />
                        <el-table-column label="单元名称" align="center" prop="name" />
                        <!-- <el-table-column label="所属课程" align="center" prop="courseName" /> -->
                        <el-table-column label="创建人" align="center" prop="creatorName" />
                        <el-table-column label="单元状态" align="center" prop="validFlag">
                            <template slot-scope="scope">
                                <!-- 用active-value="1" inactive-value="0"时的active-value值类型为string，如果要求active-value值类型为number时，必须在其前面加上冒号(:)来转换 -->
                                <el-switch v-model="scope.row.validFlag" :active-value="1" :inactive-value="0"
                                    @change="handleValidFlagChange(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="单元简介" align="center" prop="remark">
                            <template slot-scope="scope">
                                <div v-if='scope.row.remark && (scope.row.remark.length > 10)'>
                                    <el-popover title="详细" trigger="hover" placement="top" width="200">
                                        <p>{{ scope.row.remark }}</p>
                                        <div slot="reference">
                                            <p size="medium">{{ scope.row.remark | remark }}</p>
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-else>
                                    <span>{{ scope.row.remark }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-folder-opened"
                                    @click="handleView(scope.row)" v-hasPermi="['student:unit:view']">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-form>
        </el-card>

    </div>
</template>
  
<script>
import { getCourse } from "@/api/student/course";
export default {
    name: "courseDetail",
    data() {
        return {
            form: {
                name: '',
                specialityName: '',
                resultImage: '',
                creatorName: '',
                createTime: '',
                remark: '',
                resultCode: '',
                resultImage: '',
                validFlag: '',
                srcList: [],
                tunitInfoVos: []
            },
            loading: false
        };
    },
    created() {
        this.getCourseDetail();
    },
    watch: {
        '$route.params': {
            immediate: true,
            handler() {
                console.log(this.$route.name);
                if (this.$route.name == 'courseDetail') {
                    this.getCourseDetail();
                }
            }
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        getCourseDetail() {
            var id = this.$route.query.id
            getCourse(id).then(response => {
                response.data.resultImage = "/dev-api" + response.data.resultImage
                response.data.srcList = [response.data.resultImage];
                // /profile/upload/2023/09/09/木门_20230909235902A001.jpg
                this.form = response.data;
                console.log(this.form);
            });
        },
        /** 详情按钮操作 */
        handleView(row) {
            this.handleToDetailPage(row.id)
        },
        // 跳转到任务详情页面(路由跳转)
        handleToDetailPage(id) {
            this.$router.push({
                name: 'unitDetail',
                query: {
                    id: id
                },
            });
        },
    },
    filters: {
        remark(value) {
            if (!value) {
                return
            } else {
                if (value.length > 10) {
                    var target = value.substr(0, 10) + '....'
                } else {
                    target = value
                }
                return target;
            }
        },
    }
};
</script>
  